<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<script>
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type='text/javascript' src='./js/datepicker/WdatePicker.js'></script>

<script type="text/javascript">
	function getTasks(){
		var uid = $("#userId").val();
		var startTime = $("#startTime").val();
		var endTime = $("#endTime").val();
		$("#divReport").hide();
		$.ajax({
			type:"post",
			url:"query.do",
			dataType:"json",
			data:"userId="+uid+"&startTime="+startTime+"&endTime="+endTime,
			success:function(date){
				if(date != null){
					var tbody = $("#tbTasks tbody");
					tbody.empty();
					$.each(date,function(entryindex,entry){
						var itemObj = $('<tr><td>'+entry.actionTime+'</td><td>'+entry.userName+'</td><td>'+entry.description+'</td><td>'+entry.timeCost+'</td></tr>');
						tbody.append(itemObj);
					});
					$("#tbTasks").show();
					$("#btnExport").show();
				}
			}
		});
	}
	
	function exportTask(){
		var uid = $("#userId").val();
		var startTime = $("#startTime").val();
		var endTime = $("#endTime").val();
		$("#divReport").html("");
		$.ajax({
			type:"post",
			url:"export.do",
			dataType:"text",
			data:"userId="+uid+"&startTime="+startTime+"&endTime="+endTime,
			success:function(responseText){
				$("#divReport").html("<PRE>"+responseText+"</PRE>");
				$("#divReport").show();
			}
		});
	}
	
</script>
</head>
<body>
	<table align="center" cellpadding="0" cellspacing="0" style="width:70%;border-bottom:1px solid black;">
		<tr>
			<td style="text-align:left;padding-left:10px;padding-bottom:5px;">
				<a href="home.do">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;<span style="font-weight: bold;">Report</span>
			</td>
		</tr>
	</table>
	<div align="center">
	<br/>
				<table width="70%" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td style="width: 280px;">Start Time:
							<input id="startTime" type="text" name="startTime" id="startTime" value="${currentDate }" maxlength="10" />
							<img class="calendarIcon"  onclick="WdatePicker({el:'startTime'})" src="media/cal.gif">
						</td>
						<td style="width: 280px;">End Time:
							<input id="endTime" type="text" name="endTime" id="endTime" value="${currentDate }" maxlength="10" />
							<img class="calendarIcon" onclick="WdatePicker({el:'endTime'})" src="media/cal.gif">
						</td>
						<td style="width: 150px;">User:
							<select id="userId" name="userId">
								<option value="-1" >All User</option>
								<c:forEach var="user" items="${users}">
								    <option value="${user.id}">${user.name}</option>
								</c:forEach>
							</select>
						</td>
						<td style="text-align: left;">
							<input type="button" style="border:1px solid #363636;" value="Query" onclick="getTasks()">&nbsp;<input type="button" value="Export" onclick="exportTask()" id="btnExport" style="display: none;border:1px solid #363636;"/>
						</td>
					</tr>
				</table>
				<table id="tbTasks" border="1" style="display: none; margin-top:10px; margin-bottom:10px;" width="70%" align="center" cellpadding="0" cellspacing="0">
					<thead>
					<tr style="background-color: #DDDDDD;color: black;font: bolder;">
						<td style="width:150px;">ActionTime</td>
						<td style="width:150px;">Responsibility</td>
						<td>Description</td>
						<td style="width:50px;">TimeCost(h)</td>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				
				<div id="divReport" style="border:1px solid #CCCCCC; display:none; padding-left:5px;padding-top:5px;padding-bottom:5px; margin-top:5px;width:70%;text-align:left;" align="center">
				
				</div>
	</div>
</body>
</html>